<template>
	<view>
		<view class="wrap">
			<view>
				<!-- 	<u-tabs :list="tabList" :current="current" @click='change' scrollable='false' ref="tabs"
					lineColor='#FFDA00' activeStyle='color: #FFDA00;font-size: 32rpx;'
					itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:50vw"
					lineWidth='40'></u-tabs> -->
				<u-subsection :list="tabList" :current="current" @change="change" mode="subsection" fontSize='14px'
					activeColor='#FFDA00'></u-subsection>
			</view>
			<swiper :current="swiperCurrent" @change="swiperChange" style="height: 100vh;">
				<swiper-item class="swiper-item">
					<add-all-house :model="model"></add-all-house>
				</swiper-item>
				<swiper-item class="swiper-item">
					<add-sub-house :model="model"></add-sub-house>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import addAllHouse from '@/pages/components/zy/addAllHouse.vue'
	import addSubHouse from '@/pages/components/zy/addSubHouse.vue'
	import {
		get
	} from '@/serve/method'
	export default {
		components: {
			addAllHouse,
			addSubHouse
		},
		data() {
			return {
				tabList: [{
					name: '整租'
				}, {
					name: '合租'
				}],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				// 房源对象
				model: null,
			};
		},
		onLoad: function(option) {
			console.log(option, 8888)
			console.log(option.id, 9999)
			// let that = this
			if (option.id !== undefined) {
				this.model = JSON.parse(option.id)
			}
			if (option.xiugai !== undefined) {
				console.log('xiugai1')
				let url = '/api/house/findHouseById'
				get(url, {
					id: option.xiugai
				}).then((res) => {
					this.model = res.data
				})
			}
			// console.log(this.model, 9999)
		},
		methods: {
			// tab栏切换
			change(index) {
				console.log(index, 999)
				this.current = index
				this.swiperCurrent = index
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current; // 当滑块切换时更新current的值
				this.current = e.detail.current
			}
		}
	};
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.tabSwiper {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.title {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-tips-color;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
			}
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100vh;
	}
</style>